<template>
	<view>
		<!-- 头部 -->
		<yHeader :current='6' :screenWidth="screenWidth" @Tabs="handleTabs"></yHeader>

		<view class="background flex align-center">
			<view class="center flex align-center justify-between background3">
				<view class="">

				</view>
				<view class="background2 bg-white flex flex-column align-center justify-center"
					style="width: 600rpx;height: 600rpx;">
					<text class="" style="font-size: 46rpx;">订单融资</text>
					<image style="width: 500rpx;margin-top: 20rpx;cursor: pointer;" src="/static/icon/dianjishenqing.png"
						mode="widthFix" @click="buyFinance()"></image>
					<text class="mt-1" style="font-size: 46rpx;">抵押融资</text>
					<image style="width: 500rpx;margin-top: 20rpx;cursor: pointer;" src="/static/icon/dianjishenqing.png"
						mode="widthFix" @click="buyFinance()"></image>

				</view>
			</view>
		</view>
		<view class="center">
			<view class="flex flex-column align-center justify-center">
				<view class=" flex mt-4 align-center justify-center">
					<image style="height: 50rpx;" src="../../static/icon/left.png" mode="heightFix"></image>
					<text class="m-2" style="font-size: 50rpx;">服务优势</text>
					<image style="height: 50rpx;" src="../../static/icon/right.png" mode="heightFix"></image>
				</view>
				<view class="w-100 p-2 py-4 flex justify-between" style="flex-wrap: wrap;">
					<view v-for="(item,i) in ServiceAdvantagesData" :key="i"
						class="hover bg-white mb-3 flex justify-center align-center py-3" style="width: 32.5%;">
						<image style="width: 250rpx;" class="mr-2" :src="'../../static/icon/'+(i+1)+'.png'"
							mode="widthFix"></image>
						<view class="flex flex-column ml-2">
							<text class="font-lg font-weight-bold" style="color: rgb(250,136,14);">{{item.title}}</text>
							<text v-if="item.value!=void 0">{{item.value}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-column mb-4 align-center justify-center">
				<view class=" flex mt-2 align-center justify-center">
					<image style="height: 50rpx;" src="../../static/icon/left.png" mode="heightFix"></image>
					<text class="m-2" style="font-size: 50rpx;">业务模式</text>
					<image style="height: 50rpx;" src="../../static/icon/right.png" mode="heightFix"></image>
				</view>
				<view class="bg-white w-100 flex py-4 flex-column align-center">
					<image style="width: 1200rpx;" src="../../static/icon/7.jpg" mode="widthFix"></image>
					<image style="width: 1200rpx;" src="../../static/icon/8.jpg" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter :screenWidth="screenWidth"></yFooter>
	</view>
</template>

<script>
	const app = getApp()
	import yHeader from '@/components/yHeader.vue'
	import yFooter from '@/components/yFooter.vue'
	import {
		Message,
		Notification
	} from "element-ui";
	export default {
		components: {
			yHeader,
			yFooter,
		},
		data() {
			return {
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				ServiceAdvantagesData: [{
						imagesrc: '../../static/icon/1.png',
						title: '费率低',
						value: '业内最低'
					},
					{
						imagesrc: '../../static/icon/2.png',
						title: '额度高',
						value: '金额不限'
					},
					{
						imagesrc: '../../static/icon/3.png',
						title: '按日计费',
					},
					{
						imagesrc: '../../static/icon/4.png',
						title: '审批快',
						value: '最快两小时'
					},
					{
						imagesrc: '../../static/icon/5.png',
						title: '放款快',
						value: '最长24小时'
					},
					{
						imagesrc: '../../static/icon/6.png',
						title: '随借随还',
					},
				]
			}
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url
				})
			},
			buyFinance() {
				if (uni.getStorageSync('loginInfo') == '') {
					Message({
						type: 'warning',
						message: '登录后可享受全部服务'
					})
					let time = setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						clearTimeout(time)
					}, 2000)
					return
				}
				uni.navigateTo({
					url: '/pages/finance/order-financing/buyfinance'
				})
			},
			mortgageFinance() {
				uni.navigateTo({
					url: '/pages/finance/mortgagefinance/mortgagefinance'
				})
			}
		}
	}
</script>

<style>
	.center {
		width: 1200px;
		margin: auto;
	}

	.hover:hover {
		transform: translateY(-10rpx);
		transition: all 0.8s;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .2);
	}

	.background {
		background-image: url('https://digital.essc.top/dist/h5/static/bgjr.png');
		background-size: cover;
		background-repeat: no-repeat;
		height: 780rpx;
	}

	.background2 {
		background-image: url('https://digital.essc.top/dist/h5/static/gold.png');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.background3 {
		background-image: url('https://digital.essc.top/dist/h5/static/10.png');
		background-size: 100%;
		height: 100%;
		background-repeat: no-repeat;
	}

	.p-big {
		padding: 0 225rpx;
	}

	.getPages {
		background-color: #fc7c08;
		color: #fff;
	}

	page {
		background-color: #FAF8FB;
	}

	.bgc {
		background-color: #ffffff;
		cursor: pointer;
	}

	navigator:hover {
		color: #fc7c08;
	}

	.header-right {
		margin-left: 30rpx;
	}

	.header text {
		margin-right: 20rpx;
	}

	.logo-nav .text {
		padding: 0 50px;
		font-size: 30rpx;
	}

	.jiaoyi text {
		display: block;
		width: 300rpx;
		height: 50rpx;
	}

	.active {
		border-bottom: 2rpx solid pink;
	}
</style>